<template>
  <!-- <span class="title">配置项</span> -->
  <div class="datatable">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item :title="t(`module.table.Project`)" name="1">
        <el-button type="primary" @click="add('organization')">{{
          t(`module.table.Add`)
        }}</el-button>
        <el-tree :data="organizationList" node-key="id">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <p class="label">{{ node.label }}</p>
              <p>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="edit(node, data, 'organization')"
                  >{{ t(`module.table.Edit`) }}</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click.stop="remove(node, data, 'organization')"
                  >{{ t(`module.table.Delete`) }}</el-button
                >
              </p>
            </div>
          </template>
        </el-tree>
      </el-collapse-item>
      <el-collapse-item :title="t(`module.table.Area`)" name="2">
        <el-button type="primary" @click="add('area')">{{
          t(`module.table.Add`)
        }}</el-button>
        <el-tree :data="areaList" node-key="id" :props="defaultProps">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <p class="label">{{ node.label }}</p>
              <p>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="edit(node, data, 'area')"
                  >{{ t(`module.table.Edit`) }}</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click.stop="remove(node, data, 'area')"
                  >{{ t(`module.table.Delete`) }}</el-button
                >
              </p>
            </div>
          </template>
        </el-tree>
      </el-collapse-item>
      <!-- <el-collapse-item :title="t(`module.table.Department`)" name="7">
        <el-button type="primary" @click="add('department')">{{
          t(`module.table.Add`)
        }}</el-button>
        <el-tree :data="departmentList" node-key="id" :props="defaultProps">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <p class="label">{{ node.label }}</p>
              <p>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="edit(node, data, 'department')"
                  >{{ t(`module.table.Edit`) }}</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click.stop="remove(node, data, 'department')"
                  >{{ t(`module.table.Delete`) }}</el-button
                >
              </p>
            </div>
          </template>
        </el-tree>
      </el-collapse-item>
      <el-collapse-item :title="t(`module.table.Job`)" name="8">
        <el-button type="primary" @click="add('job')">{{
          t(`module.table.Add`)
        }}</el-button>
        <el-tree :data="jobList" node-key="id" :props="defaultProps">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <p class="label">{{ node.label }}</p>
              <p>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="edit(node, data, 'job')"
                  >{{ t(`module.table.Edit`) }}</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click.stop="remove(node, data, 'job')"
                  >{{ t(`module.table.Delete`) }}</el-button
                >
              </p>
            </div>
          </template>
        </el-tree>
      </el-collapse-item> -->
    </el-collapse>
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    :title="
      settingForm.action == 'edit'
        ? settingForm.type == 'organization' ? t(`module.table.EditTopLevel`) : t(`module.table.EditSublevel`)
        : settingForm.type == 'organization' ? t(`module.table.AddTopLevel`) : t(`module.table.AddSublevel`)
    "
  >
    <el-form :model="settingForm" label-width="auto">
      <el-form-item
        v-if="
          settingForm.button_type == 'area' &&
          settingForm.parent_id == 0 &&
          settingForm.action != 'edit'
        "
        :label="t(`module.table.Project`)"
      >
        <el-tree-select
          v-model="settingForm.organization_id"
          :data="organizationList"
          :render-after-expand="false"
          check-strictly
        />
      </el-form-item>
      <el-form-item
        v-if="settingForm.action != 'edit'"
        :label="t(`module.table.Parent`)"
      >
        <el-tree-select
          v-model="settingForm.parent_id"
          :data="parentList"
          :render-after-expand="false"
          @change="selectParent"
          check-strictly
        />
      </el-form-item>
      <el-form-item :label="t(`module.table.Name`)">
        <el-input v-model="settingForm.name" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="Please select a sex">
          <el-option label="Male" value="1" />
          <el-option label="Female" value="0" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ t(`module.table.Cancel`)}}</el-button>
        <el-button type="primary" @click="addFunc()">{{ t(`module.table.Confirm`)}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import API from 'api'

export default {
  name: 'config',
  setup() {
    const { t } = useI18n()
    let state = reactive({
      organizationList: [],
      departmentList: [],
      areaList: [],
      jobList: [],
      dialogFormVisible: false,
      settingForm: {
        id: 0,
        action: '',
        type: 0,
        button_type: '',
        name: '',
        parent_id: 0,
        parent_name: '',
        organization_id: 0,
      },
      selectConfig: {
        multiple: true,
        checkStrictly: true,
      },
      parentList: [],
    })
    const { proxy } = getCurrentInstance()
    onMounted(() => {
      initAreaList()
      initOrganizationList()
      // initDepartmentList()
      // initJobList()
    })

    const remove = (node, data, type) => {
      switch (type) {
        case 'organization':
          API.handleOrganization({ id: data.id, action: 'delete' }).then(() => {
            initOrganizationList()
          })
          break
        case 'area':
          API.handleSetting({ id: data.id, type: type, action: 'delete' }).then(
            () => {
              initAreaList()
            }
          )
          break
        case 'department':
          API.handleSetting({ id: data.id, type: type, action: 'delete' }).then(
            () => {
              initDepartmentList()
            }
          )
          break
        case 'job':
          API.handleSetting({ id: data.id, type: type, action: 'delete' }).then(
            () => {
              initJobList()
            }
          )
          break
      }
    }
    const add = (type) => {
      state.settingForm = {
        id: null,
        action: 'add',
        type: type,
        button_type: type,
        name: '',
        parent_id: '',
      }
      switch (type) {
        case 'area':
          state.parentList = state.areaList
          break
        case 'organization':
          state.parentList = state.organizationList
          break
        case 'department':
          state.parentList = state.departmentList
          break
        case 'job':
          state.parentList = state.jobList
          break
      }
      state.dialogFormVisible = true
    }
    const initForm = () => {
      state.settingForm = {
        id: null,
        action: '',
        type: 0,
        button_type: '',
        name: '',
        parent_id: '',
      }
    }
    const addFunc = () => {
      switch (state.settingForm.button_type) {
        case 'department':
          API.handleSetting(state.settingForm).then(() => {
            state.dialogFormVisible = false
            initForm()
            initDepartmentList()
          })
          break
        case 'job':
          API.handleSetting(state.settingForm).then(() => {
            state.dialogFormVisible = false
            initForm()
            initJobList()
          })

          break
        case 'organization':
          API.handleOrganization(state.settingForm).then(() => {
            state.dialogFormVisible = false
            initForm()
            initOrganizationList()
          })
          break
        case 'area':
          API.handleSetting(state.settingForm).then(() => {
            state.dialogFormVisible = false
            initForm()
            initAreaList()
          })
          break
      }
      state.dialogFormVisible = false
    }

    // 获取组织列表
    const initOrganizationList = () => {
      API.organizationList().then((res) => {
        state.organizationList = res.data
      })
    }
    // 获取部门列表
    const initDepartmentList = () => {
      API.settingList({ type: 'department' }).then((res) => {
        state.departmentList = res.data
      })
    }
    // 获取岗位列表
    const initJobList = () => {
      API.settingList({ type: 'job' }).then((res) => {
        state.jobList = res.data
      })
    }
    // 获取区域列表
    const initAreaList = () => {
      API.settingList({ type: 'area' }).then((res) => {
        state.areaList = res.data
      })
    }

    const edit = (node, data, type) => {
      switch (type) {
        case 'organization':
          state.parentList = state.organizationList
          break
        case 'area':
          state.parentList = state.areaList
          break
        case 'department':
          state.parentList = state.departmentList
          break
        case 'job':
          state.parentList = state.jobList
          break
      }
      state.settingForm = {
        id: data.id,
        action: 'edit',
        type: 0,
        button_type: type,
        name: data.label.indexOf(' ') > - 1 ? data.label.split(' ')[0] : data.label,
        parent_id: data.parent_id,
      }
      state.dialogFormVisible = true
    }

    const selectParent = (val) => {
      console.log('val===')
    }

    return {
      t,
      add,
      addFunc,
      edit,
      remove,
      selectParent,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
::v-deep(.el-tree-node__content) {
  padding: 20px 0;
}
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.datatable {
  box-sizing: border-box;
  width: 60vw;
  margin-top: 4vh;
  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
.setstyle {
  min-height: 200px;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  cursor: default !important;
}
</style>
